import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';

const m_serv_det_icon1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_ser_det_icon1.png');
const m_serv_det_icon2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_ser_det_icon2.png');
const m_serv_det_icon3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_ser_det_icon3.png');
const m_ser_det_tel = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_serv_det_tel.png');


export default React.createClass({
  componentDidMount:function(){
    this.setActive();
  },
  setActive:function(){
    $('.scroll_menu a').click(function(){
      $('.scroll_menu a').removeClass('active');
      $(this).addClass('active')
    })
  },
  render:function(){
    return(
      <div className="m_serv_det">
        <header>
          <div className="banner">
              <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{height:"4.8rem"}} />
          </div>
          <div className="info border_b1">
            <span className="top box">
              <var className="txt_ellip">伊婉玻尿酸（1ml／支）隆鼻 赵琼博士</var>
              <small className="txt_ellip">告别干瘪脸，让你的面颊更饱满</small>
            </span>
            <div className="price"><span>¥ 999.00</span></div>
            <div className="o_price">原价：¥ 5999.00</div>
          </div>
          <div className="promise box border_b1">
            <span><ImageLazy src={m_serv_det_icon1} />品质保证</span>
            <span><ImageLazy src={m_serv_det_icon2} />权威鉴定</span>
            <span><ImageLazy src={m_serv_det_icon3} />品质特卖</span>
          </div>
        </header>

        <div className="contant border_b1">
          <div className="top">
            <span className="pic" style={{'background-image':"url(http://img.xiami.net/images/album/img30/1930/3772411429710303_2.jpg)"}}></span>
            <h4>
              赵琼·医学博士<br/><small>北京斯嘉丽医疗美容医院 <var>&#9658;</var></small>
            </h4>
            <div className="tel">
              <ImageLazy src={m_ser_det_tel} /><br/>电话咨询
            </div>
          </div>
          <div className="scroll_menu">
            <div className="wrapper border_b1 border_t1 box">
              <a href="javascript:void(0)" className="active">商品详情</a>
              <a href="javascript:void(0)">医生信息</a>
              <a href="javascript:void(0)">相关案例</a>
            </div>
          </div>
          <div className="item_wrapper">
            <div className="item">
              <h3 className="tit_sty1">
                商品详情<br/><small>Product details</small>
              </h3>
              <div className="wrapper">
                <em><var>相关证书</var></em>
                <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{width:'100%'}} />
              </div>
              <div className="txt">
                <p>术后效果图／该商品功效修饰鼻形修饰鼻形修饰鼻饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形..</p>
              </div>
              <div className="wrapper">
                <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{width:'100%'}} />
              </div>
              <div className="txt">
                <p>术后效果图／该商品功效修饰鼻形修饰鼻形修饰鼻饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形..</p>
              </div>
            </div>

            <div className="item">
              <h3 className="tit_sty1">
                注意事项<br/><small>Be careful</small>
              </h3>
              <div className="txt_sty_a">
                <div className="txt_wrapper">
                  <div><em>◆ 1，</em><span>修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形。修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形。</span></div>
                  <div><em>◆ 2，</em><span>修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形。鼻形修饰鼻形。</span></div>
                  <div><em>◆ 3，</em><span>修饰鼻形修饰鼻形修饰鼻形修饰鼻形修饰鼻形。饰鼻形。</span></div>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>

            <div className="item">
              <h3 className="tit_sty1">
                医生信息<br/><small>Doctor information</small>
              </h3>
              <div className="doc_info">
                <span style={{'background-image':"url(http://img.xiami.net/images/album/img30/1930/3772411429710303_2.jpg)"}}></span>
                <h4>
                  赵琼·医学博士<br/><small>北京斯嘉丽医疗美容医院 <var>&#9658;</var></small>
                </h4>
                <em>◆</em><br/>
                <p>
                  1996年从事整容至今，擅长鼻部等微整形，<br/>
                  对于女性抗衰老有亲身体会和理解。<br/>
                  曾多次受主流媒体和女性杂志专访。
                </p>
              </div>
              <div className="wrapper">
                <em><var>相关案例</var></em>
                <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{width:'100%'}} />
              </div>
              <div className="txt_sty_b">
                <div className="txt_wrapper">
                  <div>
                    <h4>◆ 案例说明 ◆</h4>
                    鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌<br/>
                    玻尿酸垫鼻梁，玻尿酸垫鼻梁，玻尿酸垫鼻梁
                  </div>
                  <div>
                    <h4>◆ 治疗方法 ◆</h4>
                    鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷
                  </div>
                </div>
              </div>
              <div className="wrapper">
                <em><var>相关案例</var></em>
                <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{width:'100%'}} />
              </div>
              <div className="txt_sty_b">
                <div className="txt_wrapper">
                  <div>
                    <h4>◆ 案例说明 ◆</h4>
                    鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌<br/>
                    玻尿酸垫鼻梁，玻尿酸垫鼻梁，玻尿酸垫鼻梁
                  </div>
                  <div>
                    <h4>◆ 治疗方法 ◆</h4>
                    鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷鼻部塌陷
                  </div>
                </div>
              </div>
            </div>

            <div className="item">
              <h3 className="tit_sty1">
                购买须知<br/><small>Notice</small>
              </h3>
              <div className="txt_sty_c">
                <div>
                  <span>◆　消费流程</span>
                  <p>
                    1. 预约并支付预约金：<br/>
                    2. 联系医生咨询并预约面诊：
                  </p>
                </div>
                <div>
                  <span>◆　预约金</span>
                  <p>
                    1. 预约金是您索托项目的预约金，您在美人谷支
                  </p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>
          </div>
        </div>
        <div style={{height:"2.26rem"}}></div>
        <div className="fixed_b_menu border_t1 border_b1 box">
          <div className="top">◆　预约金：¥ 231.00</div>
          <div className="menu">
            <a href="javascript:void(0)">加入购物车</a>
            <a href="javascript:void(0)">立即购买</a>
          </div>
        </div>
      </div>
    )
  }
})
